<template>
  <div class="m-top">
    <div>
      <el-select v-model="selectValue" size="small" placeholder="请选择平台" @change="selectChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div>
      <el-button size="small" type="primary" @click="addAuth">新增</el-button>
    </div>
  </div>
  <div class="m-table">
    <StaffManagetList :cols="tableCols" :tableData="tableData" :hiddenIcon=[1,3] />
  </div>
  <AuthPopups :isPopups="isPopups" :typeId="typeId" @closePop="closeMenuPop" @submit="submit" />
</template>

<script>
import { reactive,toRefs, onMounted } from "vue";
import StaffManagetList from "@/components/StaffManagetList";
import AuthPopups from "./component/authPopups";

import { getDataList , getDataAdd} from "@/api/users.js";
export default {
  components: {
    StaffManagetList,
    AuthPopups,
  },
  setup() {
    const state = reactive({
      selectValue:"",
      options: [
        {
          value: "选项1",
          label: "系统平台",
        },
        {
          value: "选项2",
          label: "品牌",
        },
        {
          value: "选项3",
          label: "商户",
        },
      ],
      value: "",
      tableCols: [
        {
          props: "code",
          label: "编号",
        },
        {
          props: "tagGroupName",
          label: "名称",
        },
        {
          props: "createTime",
          label: "创建时间",
        },
        {
          props: "createByShow",
          label: "创建人",
        },
        {
          props: "tableName",
          label: "实体名称",
        },
        {
          props: "systemShow",
          label: "所属系统",
        },
      ],
      tableData: [],
      isPopups: false,
      typeId: 1,
    });
    const addAuth = () => {
      state.isPopups = true;
    };
    const closeMenuPop = (val) => {
      state.isPopups = val;
    };
    function submit(v){
      console.log(v)
      getDataAdd(v).then(res => {
        console.log(res)
        if(res.code == 200){
          state.isPopups = false
        }
      })
    } 
    //下拉框 值改变请求接口、
    function selectChange(){
      // getDataAdd().then(res => {
      //   console.log()
      // })
    }
    onMounted(() => {
      getDataList({
        "num": 1,
        "size": 5
      }).then(res => {
        console.log(res);
        if(res.code == 200){
          state.tableData = res.data.data;
        }
      });
    });

    return {
      ...toRefs(state),
      addAuth,
      closeMenuPop,
      submit,
      selectChange
    };
  },
};
</script>

<style lang="less" scoped>
.m-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 27px;
}
</style>
